 /*
 * @description: 装修模版
 * @Author: along
 * @Date: 2020-09-07
 * @Last Modified by: along
 * @Last Modified time: 2020-09-11
 * @desc: https://zsdx.yuque.com/ck6ubz/zflzgc/shtyhx
 */
<template>
    <div class="container">
        <div class="container-wrap">
            <!-- header -->
            <header>
                <div class="container-wrap-title">
                    当前装修页面:  {{ config.title || '--' }}
                </div>
                <div class="container-wrap-operation">
                    <span
                        class="operation-cancel"
                        @click="cancelRenovation()"
                    >取消编辑</span>
                    <span
                        class="operation-preview operation-save"
                        @click="priviewTemp()"
                        id="priview"
                    >预览页面</span>
                    <span
                        class="operation-save"
                        @click="saveRenovation()"
                    >保存装修</span>
                </div>
            </header>

            <main>
                <!-- assembly -->
                <contro-page
                    :data="controlData"
                    @handle="handleData"
                />

                <!-- emulator display -->
                <contro-phone
                    :list="list"
                    :nowid="id"
                    :bottom="bottom"
                    :config="pageConfig"
                    @showEdit="showEdit"
                    @delete="deleteControl"
                    @send="sendList"
                    @addid="addId"
                    @top="getTop"
                />

                <!-- data editing -->
                <contro-edit
                    :type="type"
                    :config="pageConfig"
                    :list="list"
                    :id="id"
                    :top="top"
                    :message="deleteMessage"
                    :add="addMessage"
                    @change="changeConfig"
                    @changeList="changeList"
                    @changePos="changePos"
                />
            </main>

            <!-- 预览模块 -->
            <div
                v-if="showDialog"
                class="priview"
                :style="{left: left - 104 + 'px'}"
            >
                <i
                    class="iconfont el-icon-hand-close"
                    @click="showDialog = false"
                />
                <img
                    src="@/assets/image/template-wx.png"
                    class="priview-bg"
                >
                <p class="priview-title">预览页面</p>
                <p class="priview-text">快用手机扫码进行预览吧～</p>
                <div class="priview-wrap">
                    <img
                        :src="url"
                        class="priview-url"
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import control from '@/components/active/control.js';
import controPage from '@/components/active/control.vue';
import controPhone from '@/components/active/phone.vue';
import controEdit from '@/components/active/edit.vue';
export default {
    components: {
        controPage,
        controPhone,
        controEdit
    },
    data () {
        return {
            bottom: 0,//手机区距离顶部距离
            top: 0,//编辑区距离顶部距离
            addMessage: '',//新增组件时向编辑区域发出通知
            deleteMessage: '',//删除组件向编辑区域发出通知
            id: 0,//组件列表位置id
            type: 0,//当前编辑区域展示类型 0:基础配置 1:单列图片 2:多列图片 3:轮播图 4:辅助空白 5:辅助线 101:商品组
            pageConfig: {
                base_config: {
                    title_type: 1,//页面标题类型 1:文字标题 2:图片标题
                    title_text: '',//页面标题内容(限title_type=1)
                    title_image: '',//页面标题图片链接(限title_type=2)
                    title_background: 'rgba(255,255,255,1)',//标题栏背景色
                    icon_type: 1,//默认tab栏颜色 1:黑色 2:白色
                    header_type: '',//通栏‘transparent’ 不通栏：‘’
                    background_color: 'rgba(255,255,255,1)',
                    button_style: 0,//0:系统默认 1:自定义样式
                    button_image: '',//自定义按钮图片
                    share_config: {
                        enable: true,//是否开启分享
                        image: '',//分享logo
                        title: '',//分享标题
                        desc: '',//分享描述
                        url: '',//分享地址(不提交默认当前h5地址)
                        share_award: {
                            type: 1,
                            coupon_no: '',
                            share_limit: 5
                        }
                    },
                    is_shopping_cart: 0
                }
            },
            list: [],//手机展示组件集合
            controlData: control,//组件展示列表
            config: {//页面基础信息
                title: '',
                id: '',
            },
            page_no: '',
            authResult: {},
            left: 0,//预览二维码left
            url: '',//预览二维码
            showDialog: false,
            // 分享组件位置切换
            shareIndex: 0,
            copyid: 0,
            active_menu: ''
        };
    },
    watch: {
        pageConfig: {
            handler: function (val, oldVal) {
                // console.log('----页面基础配置----', JSON.stringify(val));
            },
            deep: true
        }
    },
    filters: {},
    computed: {},
    created () {},
    mounted () {
        this.init();

        window.onresize = () => {
            this.left = document.getElementById('priview').getBoundingClientRect().left;
        };
    },
    methods: {
        /**
         * @description 页面数据初始化
         */
        init () {
            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '首页模块'},{title: '装修模版', path: '/student/active/active-page'},{title: '装修页面'}]);
            this.authResult = this.$route.meta.authResult;
            this.$set(this.config, 'page_no', this.$route.query.page_no);
            this.left = document.getElementById('priview').getBoundingClientRect().left;
            this.active_menu = this.$route.query.active_menu ? this.$route.query.active_menu : '';

            if(this.$route.query.page_no !== '') {
                this.getPageDetail();
            }
        },

        /**
         * @description 获取编辑数据
         */
        getPageDetail () {
            this.$post('/student/custom_page%5Cget',{
                page_no: this.config.page_no
            },resp=>{
                if (resp.code == 1) {
                    this.$set(this.pageConfig, 'base_config', resp.data.page_config.base_config);
                    this.$set(this.config, 'title', resp.data.page_config.base_config.title_text);

                    let list = resp.data.page_config.item_list;

                    if(list.length > 0) {
                        for(let key=0; key<list.length; key++){
                            if(list[key].type == 3 || list[key].type == 2) {
                                list[key].status = true;
                                const arr = list[key].data.images;

                                for(let j=0; j<arr.length; j++) {
                                    arr[j].action.type = 1;
                                }
                            }
                            // 单列图片
                            if(list[key].type == 1) {
                                list[key].data.action.type = 1;
                            }
                            //商品组
                            if(list[key].type == 101) {
                                list[key].flag = 0;
                            }

                            // 分享按钮
                            if(list[key].type == 11) {
                                if(Object.prototype.toString.call(list[key]['style']['share_pwd']) == '[object Undefined]') {
                                    this.$set(list[key]['style'], 'share_pwd', 0);
                                }
                            }
                        }
                    }
                    // 分享配置处理异常处理 服务端老数据没有处理....
                    setTimeout(() => {
                        const share_award = this.pageConfig['base_config']['share_config']['share_award'];

                        // 无分享优惠处理 追加字段
                        if(!!share_award) {
                            const type = share_award['type'];

                            if(type == 0) {
                                if(!share_award['coupon_no']) {
                                    this.$set(share_award, 'coupon_no', '');
                                }
                                if(!share_award['share_limit']) {
                                    this.$set(share_award, 'share_limit', '');
                                }
                                if(!this.pageConfig['base_config']['button_style']) {
                                    this.$set(this.pageConfig['base_config'], 'button_style', 0);
                                }
                                if(!this.pageConfig['base_config']['button_image']) {
                                    this.$set(this.pageConfig['base_config'], 'button_image', '');
                                }
                            }
                        }
                        // 针对1.6.9版本之前数据处理 追加字段
                        if(!share_award) {
                            this.pageConfig['base_config']['share_config']['share_award'] = {
                                type: 0,
                                coupon_no: '',
                                share_limit: ''
                            };
                            this.$set(this.pageConfig['base_config'], 'button_style', 0);
                            this.$set(this.pageConfig['base_config'], 'button_image', '');
                            this.$set(share_award, 'type', 0);
                            this.$set(share_award, 'coupon_no', '');
                            this.$set(share_award, 'share_limit', '');
                        }
                    },60);

                    this.list = JSON.parse(JSON.stringify(list));
                    this.emit();
                    //test
                    // this.list = this.list.concat([{
                    //     type: 106,
                    //     style: {
                    //         "marginV": 14,
                    //         "marginH": 10,
                    //         "coupon_array": 0,
                    //         "is_preview_icon": false,
                    //         "iconColor": "rgba(255,255,255,1)",
                    //         "iconFontSize": 60,
                    //         "iconTop": 20,
                    //         "iconLeft": 20,
                    //         "coupon_width": 200
                    //     },
                    //     data: {
                    //         "coupon_list": [
                    //             {
                    //                 "coupon_no": "cp_c9be2adb0b62a",
                    //                 "cover_image": "http://pic.wxhand.com/dev/phaadmin_image/5a8f992499567bd8929e3c32611fcd5e.jpg"
                    //             },
                    //             {
                    //                 "coupon_no": "cp_3ab7d980d6d60",
                    //                 "cover_image": "http://pic.wxhand.com/dev/phaadmin_image/5597dceebba8a966873d7213f7d7ec25.jpeg"
                    //             }
                    //         ]
                    //     }
                    // }]);
                    //test
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 模拟触发 回填圆角
         */
        emit () {
            this.showEdit({
                type: 0,
                index: -1
            });
        },

        /**
         * @description 添加组件到手机
         */
        handleData (row) {
            // console.log('当前点击组件', this.list);

            if(this.list.length > 0 && row.type == 101) {
                let list = this.list.reduce((cur,next) => {
                    cur.push(next.type);
                    return cur;
                },[]);

                if(list.includes(row.type)) {
                    this.$notify({
                        title: '提示',
                        message: '商品组最多只可以添加一个',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }
            }

            if(this.list.length > 0 && row.type == 11) {
                let list = this.list.reduce((cur,next) => {
                    cur.push(next.type);
                    return cur;
                },[]);

                if(list.includes(row.type)) {
                    this.$notify({
                        title: '提示',
                        message: '分享按钮最多只可以添加一个',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }
            }

            //发送添加通知
            this.addMessage = 'delete' + new Date().getTime();

            //添加数据
            this.list.unshift(row.config);

            //定位组件编辑区
            this.type = this.list[0].type;
            this.id = 0;

            // 添加成功提示
            this.$notify({
                title: '提示',
                message: '添加成功',
                type: 'success',
                duration: 2000
            });
        },

        /**
         * @description 获取点击组件展示对应编辑区域
         */
        showEdit (object) {
            console.log('object', object);
            this.type = object.type;//当前组件类型
            this.id = object.index;//当前组件位置
        },

        /**
         * @description 获取修改后数据，同步至组件
         */
        changeConfig (config) {
            this.pageConfig = config;
        },

        /**
         * @description 手机端数据变化监听
         */
        sendList (list) {
            console.log('----list----', list);
            this.list = list;
        },

        /**
         * @description 获取修改后数据，同步至相关组件
         */
        changeList (object) {
            this.$set(this.list, object.id, object.list);
        },

        /**
         * @description 删除组件通知右侧编辑区域数据清空
         */
        deleteControl (type) {
            this.deleteMessage = type;
        },

        /**
         * @description 监听组件下移/上移 修改数据 并向下发出通知
         */
        addId (id) {
            this.type = this.list[id].type;
            this.id = id;
        },

        /**
         * @description 监听top/bottom值变化
         */
        getTop (object) {
            this.top = object.top;
            this.bottom = object.bottom;
        },

        /**
         * @description 取消装修
         */
        cancelRenovation () {
            this.$confirm('是否要取消装修该页面，将不会保存你的修改', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'activePage',
                    query: {
                        active_menu: this.active_menu
                    }
                });
            });
        },

        /**
         * 新建保存装修/编辑保存装修
         */
        saveRenovation () {

            if(!this.config.page_no) {
                const title = this.pageConfig.base_config.title_text;
                const enable = this.pageConfig.base_config.share_config.enable;
                const share_title = this.pageConfig.base_config.share_config.title;
                const share_desc = this.pageConfig.base_config.share_config.desc;
                const share_image = this.pageConfig.base_config.share_config.image;

                if(title == '') {
                    this.$notify({
                        title: '提示',
                        message: '页面标题不可以为空',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }

                if(enable) {
                    if(share_title == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享标题不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    if(share_desc == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享内容不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    if(share_image == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享图片不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                }

                // 组件校验
                for(let key=0; key<this.list.length; key++) {
                    if(this.list[key]['type'] === 106) { //自定义优惠券
                        const dataList = this.list[key]['data']['coupon_list'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '优惠券组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['coupon_no']) {
                                this.$notify({
                                    title: '提示',
                                    message: '优惠券组件优惠券未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                            if(!dataList[i]['cover_image']) {
                                this.$notify({
                                    title: '提示',
                                    message: '优惠券组件背景图未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 107) { //自定义红包
                        const dataList = this.list[key]['data']['packet_list'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '红包组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['packet_no']) {
                                this.$notify({
                                    title: '提示',
                                    message: '红包组件红包未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                            if(!dataList[i]['cover_image']) {
                                this.$notify({
                                    title: '提示',
                                    message: '红包组件背景图未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 3) { //轮播图
                        const dataList = this.list[key]['data']['images'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '轮播图组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['image_url']) {
                                this.$notify({
                                    title: '提示',
                                    message: '轮播图组件内容未编辑',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 2) { //多图
                        const dataList = this.list[key]['data']['images'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '多图组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['image_url']) {
                                this.$notify({
                                    title: '提示',
                                    message: '多图组件内容未编辑',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 1) { //单列图片
                        const data = this.list[key]['data'];

                        if(!data.image_url) {
                            this.$notify({
                                title: '提示',
                                message: '单列图片组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 105) { //社群商品列表
                        const dataList = this.list[key]['data']['gg_nos'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '社群商品组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 103) { //自定义商品列表
                        const dataList = this.list[key]['data']['goods_nos'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '自定义商品组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 101) { //商品组
                        const goods_cate_no = this.list[key]['data']['goods_cate_no'];

                        if(!goods_cate_no) {
                            this.$notify({
                                title: '提示',
                                message: '商品分组组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 6) { //倒计时
                        const start_time = this.list[key]['data']['start_time'];
                        const end_time = this.list[key]['data']['end_time'];

                        if(!start_time || !end_time) {
                            this.$notify({
                                title: '提示',
                                message: '倒计时组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 11) { //分享按钮
                        const url = this.list[key]['data']['url'];
                        const title = this.list[key]['data']['title'];
                        const desc = this.list[key]['data']['desc'];
                        const image = this.list[key]['data']['image'];

                        if(!url) {
                            this.$notify({
                                title: '提示',
                                message: '分享跳转链接不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!title) {
                            this.$notify({
                                title: '提示',
                                message: '分享标题不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!desc) {
                            this.$notify({
                                title: '提示',
                                message: '分享内容不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!image) {
                            this.$notify({
                                title: '提示',
                                message: '分享图片不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }
                }

                this.$post('/student/custom_page%5Cadd',{
                    title: title,
                    page_config_json: JSON.stringify({
                        base_config: this.pageConfig.base_config,
                        item_list: this.list
                    })
                },resp=>{
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '新建成功',
                            type: 'success',
                            duration: 2000
                        });

                        setTimeout(() => {
                            this.$router.push({
                                name: 'activePage',
                                query: {
                                    active_menu: this.active_menu
                                }
                            });
                        }, 500);
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            }

            if(this.config.page_no) {
                const title = this.pageConfig.base_config.title_text;
                const enable = this.pageConfig.base_config.share_config.enable;
                const share_title = this.pageConfig.base_config.share_config.title;
                const share_desc = this.pageConfig.base_config.share_config.desc;
                const share_image = this.pageConfig.base_config.share_config.image;

                if(title == '') {
                    this.$notify({
                        title: '提示',
                        message: '页面标题不可以为空',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }

                if(enable) {
                    if(share_title == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享标题不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    if(share_desc == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享内容不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                    if(share_image == '') {
                        this.$notify({
                            title: '提示',
                            message: '分享图片不可以为空',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                }

                // 组件校验
                for(let key=0; key<this.list.length; key++) {
                    if(this.list[key]['type'] === 106) { //自定义优惠券
                        const dataList = this.list[key]['data']['coupon_list'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '优惠券组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['coupon_no']) {
                                this.$notify({
                                    title: '提示',
                                    message: '优惠券组件优惠券未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                            if(!dataList[i]['cover_image']) {
                                this.$notify({
                                    title: '提示',
                                    message: '优惠券组件背景图未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 107) { //自定义红包
                        const dataList = this.list[key]['data']['packet_list'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '红包组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['packet_no']) {
                                this.$notify({
                                    title: '提示',
                                    message: '红包组件红包未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                            if(!dataList[i]['cover_image']) {
                                this.$notify({
                                    title: '提示',
                                    message: '红包组件背景图未添加',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 3) { //轮播图
                        const dataList = this.list[key]['data']['images'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '轮播图组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['image_url']) {
                                this.$notify({
                                    title: '提示',
                                    message: '轮播图组件内容未编辑',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 2) { //多图
                        const dataList = this.list[key]['data']['images'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '多图组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }

                        for(let i=0; i<dataList.length; i++) {
                            if(!dataList[i]['image_url']) {
                                this.$notify({
                                    title: '提示',
                                    message: '多图组件内容未编辑',
                                    type: 'warning',
                                    duration: 2000
                                });
                                return false;
                            }
                        }
                    }

                    if(this.list[key]['type'] === 1) { //单列图片
                        const data = this.list[key]['data'];

                        if(!data.image_url) {
                            this.$notify({
                                title: '提示',
                                message: '单列图片组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 105) { //社群商品列表
                        const dataList = this.list[key]['data']['gg_nos'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '社群商品组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 103) { //自定义商品列表
                        const dataList = this.list[key]['data']['goods_nos'];

                        if(!dataList.length) {
                            this.$notify({
                                title: '提示',
                                message: '自定义商品组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 101) { //商品组
                        const goods_cate_no = this.list[key]['data']['goods_cate_no'];

                        if(!goods_cate_no) {
                            this.$notify({
                                title: '提示',
                                message: '商品分组组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 6) { //倒计时
                        const start_time = this.list[key]['data']['start_time'];
                        const end_time = this.list[key]['data']['end_time'];

                        if(!start_time || !end_time) {
                            this.$notify({
                                title: '提示',
                                message: '倒计时组件内容未编辑',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }

                    if(this.list[key]['type'] === 11) { //分享按钮
                        const url = this.list[key]['data']['url'];
                        const title = this.list[key]['data']['title'];
                        const desc = this.list[key]['data']['desc'];
                        const image = this.list[key]['data']['image'];

                        if(!url) {
                            this.$notify({
                                title: '提示',
                                message: '分享跳转链接不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!title) {
                            this.$notify({
                                title: '提示',
                                message: '分享标题不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!desc) {
                            this.$notify({
                                title: '提示',
                                message: '分享内容不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                        if(!image) {
                            this.$notify({
                                title: '提示',
                                message: '分享图片不可以为空',
                                type: 'warning',
                                duration: 2000
                            });
                            return false;
                        }
                    }
                }

                this.$post('/student/custom_page%5Cset',{
                    page_no: this.config.page_no,
                    title: title,
                    page_config_json: JSON.stringify({
                        base_config: this.pageConfig.base_config,
                        item_list: this.list
                    })
                },resp=>{
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        });

                        setTimeout(() => {
                            this.$router.push({
                                name: 'activePage',
                                query: {
                                    active_menu: this.active_menu
                                }
                            });
                        }, 500);
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            }
        },

        /**
         * @description 预览页面
         */
        priviewTemp () {
            this.$post('/student/custom_page%5Cpreview',{
                page_config_json: JSON.stringify({
                    base_config: this.pageConfig.base_config,
                    item_list: this.list
                })
            },resp=>{
                if (resp.code == 1) {
                    let base = this.$baseUrl;
                    let ticket = localStorage.getItem('sessionTicket');
                    let url = `${this.$studentBaseUrl}/pages/active/active?page_no=${resp.data.page_no}`;
                    let link = `${base}/__local/common%5Cqrcode?content=${url}&__ticket=${ticket}`;

                    this.url = link;
                    this.showDialog = !this.showDialog;
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 组件位置处理
         */
        changePos (obj) {
            this.$nextTick(() => {
                setTimeout(() => {
                    const top = document.querySelector('.shareButton').getBoundingClientRect().top + 64;

                    // console.log('top', top, obj);
                    if(obj.type === 2) {
                        this.top = document.querySelector('.assemblyList').getBoundingClientRect().height - obj.style.Top;
                    }
                    if(obj.type === 1) {
                        // console.log('---list', this.list);
                        const index = this.list.reduce((cur,next) => {
                            cur.push(next.type);
                            return cur;
                        }, []).indexOf(11);

                        let list = document.querySelectorAll('.assembly');
                        let height = [];
                        let num = 0;

                        for(let key=0; key<list.length; key++) {
                            height.push(list[key].getBoundingClientRect().height);
                        }

                        height.forEach((option,i) => {
                            if(i <= index) {
                                num += option;
                            }
                        });
                        this.top = num - document.querySelectorAll('.assembly')[index].getBoundingClientRect().height + 90;
                    }
                }, 100);
            });
        },

        /**
         * @description 数组位置移动
         */
        moverArr (arr, a, b) {
            let arr_temp = [].concat(arr); //创建一个新的临时数组，用以操作后不变更原数组

            arr_temp.splice(b, 0, arr_temp.splice(a, 1)[0]); //在b位置插入从a位置截取的元素
            return arr_temp;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    // overflow: hidden;
    &-wrap {
        width: 100%;
        flex: 1;
        flex-direction: column;
        box-sizing: border-box;
    }
    &::-webkit-scrollbar {
        width: 3px;
    }
    // header
    header {
        width: calc(100% - 209px);
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 32px;
        background: #ffffff;
        box-shadow: 0px -1px 0px 0px #F0F2F5;
        position: fixed;
        left: 209px;
        top: 53px;
        z-index: 999;
        .container-wrap-title {
            color: #333333;
            font-size: 14px;
            font-weight: 500;
        }
        .container-wrap-operation {
            height: 48px;
            display: flex;
            align-items: center;
            .operation-preview {
                width: 104px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #666666;
                font-size: 14px;
                font-weight: 500;
                box-sizing: border-box;
                border-right: 1px #F0F2F5 solid;
                cursor: pointer;
            }
            .operation-cancel {
                width: 104px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #666666;
                font-size: 14px;
                font-weight: 500;
                border-right: 1px #F0F2F5 solid;
                cursor: pointer;
            }
            .operation-save {
                width: 104px;
                height: 48px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #1890FF;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
        }
    }

    //main
    main {
        display: flex;
        box-sizing: border-box;
        flex: 1;
        height: 100%;
        overflow: auto;
        padding-bottom: 40px;
        margin-top: 55px;
        &::-webkit-scrollbar {
            width: 0px;
        }
    }

    //预览
    .priview {
        width: 316px;
        height: 410px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 128px;
        left: 300px;
        z-index: 999;
        .el-icon-hand-close {
            font-size: 18px;
            color: #333333;
            cursor: pointer;
            position: absolute;
            top: 40px;
            right: 30px;
            z-index: 99;
        }
        .priview-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 308px;
            height: 403px;
            z-index: 0;
        }
        .priview-title {
            color: #333333;
            font-size: 18px;
            font-weight: 500;
            margin-top: 59px;
            margin-bottom: 16px;
            position: relative;
            z-index: 1
        }
        .priview-text {
           color: #666666;
           font-size: 16px;
           margin-bottom: 20px;
           position: relative;
            z-index: 1
        }
        .priview-wrap {
            width: 240px;
            height: 240px;
            border: 1px #F0F2F5 solid;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            .priview-url {
                width: 220px;
                height: 220px;
            }
        }
    }
}
</style>
